<template>
    <div id="login">
      <div class="wrapper">
        <van-form class="from" @submit="onSubmit">
          <div class="title">登录</div>
          <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
          />
          <van-button
            native-type="submit"
            class="button"
            block
          >
            登录
          </van-button>
        </van-form>
      </div>
      <canvas id="bgCanvas"></canvas>
    </div>
</template>

<script>
  import axios from 'axios';
  import store from '@/store';
  import Vue from 'vue';
  import { Toast } from 'vant';

  Vue.use(Toast);

  export default {
    name: "Login",
    data() {
      return {
        username: '',
        password: '',
      };
    },
    methods: {
      onSubmit(values) {
        axios.get(store.state.api + '/login', {
          params: {
            account: this.username,
            password: this.password
          }
        }).then(res => {
          if (res.data.code == '200') {
            var pattern = /^\d*(?:\.\d{0,2})?/;
            var data = res.data.data;
            var user = {};

            user.candy = +data.candy.match(pattern)[0];       // 糖果
            user.contributionValue = data.contributionValue;  // 贡献值
            user.account = data.account;                      // 账号
            user.avatar = data.avatar;                        // 头像
            user.uid = data.uid;                              // 用户id
            user.nickname = data.nickName;                    // 用户昵称
            user.level = data.level;                          // 等级
            user.activity = data.activity;                    // 活跃度
            user.m_candy = +data.m_candy.match(pattern)[0];   // 交易市场糖果（GST）
            user.walletAddress = data.walletAddress;          // 钱包地址
            user.token = data.token;                          // 用户token

            sessionStorage.setItem('user', JSON.stringify(user));
            // 跳转到首页
            this.$router.push('/');
            Toast({
              message: '登录成功',
              position: 'bottom',
            });
          } else {
            Toast({
              message: res.data.msg,
              position: 'bottom',
            });
          }
        }).catch(error => {
          Toast({
            message: '系统繁忙',
            position: 'bottom',
          });
        });
      },
    },
    mounted() {
      require('@/assets/login.js');
      // var UA = require('ua-device');
      // var output = new UA(navigator.userAgent);
    }
  }
</script>

<style scoped>
  canvas {
    position: absolute;
    top: 0;
    left: 0;
  }
  #login {
    height: 100%;
    width: 100%;
    position: relative;
  }
  .wrapper {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
  }
  .button {
    margin-top: 10px;
    background-color: rgba(3, 106, 104, 0.7);
    background-color: #545c80;
    color: #f7f8fa;
    border: none;
  }
  .from {
    position: relative;
  }
  .title {
    color: #f7f8fa;
    font-size: 22px;
    font-weight: 700;
    position: absolute;
    top: -40px;
  }
</style>
